<template>
  <div class='container'>
    <el-card>
      <!-- 最上面的 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="关键字" class="word">
        <el-input placeholder="根据编号搜索" v-model="pamss.keyword"></el-input>
      </el-form-item>
      <el-form-item class="btn">
        <el-button @click="clearword" size="small">清除</el-button>
        <el-button type="primary" @click="searchRandoms" size="small">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 中间 -->
    <template>
      <el-alert type="info" class="alert" :closable="false" show-icon style="font-size:10px">总共{{counts}}条数据</el-alert>
    </template>
    <!-- 表单 -->
    <el-table :data="list" class="form">
      <el-table-column label="编号" prop="id">
      </el-table-column>
      <el-table-column label="题型" prop="questionType"  width="80px">
        <template #default="{row}">{{ formatType(row.questionType) }}</template>
      </el-table-column>
      <el-table-column label="题目编号" prop="questionIDs">
        <template #default="{row}">
          <a
          style="color:rgb(0,153,255)"
          v-for="(item,index) in row.questionIDs"
          :key="index"
          @click="infoDialog(item)">
            {{ item.number }} <br>
          </a>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" prop="addTime"  width="180px">
      </el-table-column>
      <el-table-column label="答题时间" prop="totalSeconds">
      </el-table-column>
      <el-table-column label="正确率" prop="accuracyRate">
      </el-table-column>
      <el-table-column label="录入人" prop="userName">
      </el-table-column>
      <el-table-column label="操作" width="80px">
        <template #default='{row}' class="doit">
          <el-button id="elbtn" type="danger" icon="el-icon-delete" circle @click="delRandoms(row)">
          </el-button>
        </template>

      </el-table-column>
    </el-table>
    <div>
    <!-- 底部分页 -->
      <el-pagination
          background
          @size-change="sizechange"
          @current-change="pageChange"
          class="pagement"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="params.pagesize"
          :current-page="params.page"
          layout=" prev, pager, next, sizes,jumper"
          :total="counts">
      </el-pagination>
    </div>
    <div>
    <!-- 渲染新增组件 -->
    <questionsPreviewVue :dialog-visible="dialogVisible" @close-dialog="closeDialog"
    :filterlist='filterlist'></questionsPreviewVue>
    </div>
    </el-card>
    </div>

</template>

<script>
import questionsPreviewVue from '@/module-hmmm/components/questions-preview'
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
export default {
  components: {
    questionsPreviewVue
  },
  name: 'QuestionsRandoms',

  data () {
    return {
      filterlist: [],
      list:
       [{
         id: '',
         addTime: '',
         accuracyRate: '',
         questionIDs: '',
         questionType: '', // 替换单选

         totalSeconds: '',
         userName: ''
       }],
      params: {
        page: 1,
        pagesize: 20
      },
      dialogVisible: false,
      counts: 0,
      pamss: {
        keyWord: ''
      },
      obj: {
        bc: 'a'
      }
    }
  },
  mounted () {
    this.getlist()
  },
  methods: {
    async getlist () {
      const res = await randoms(this.params)
      this.list = res.data.items
      this.counts = res.data.counts
    },
    formatType (value) {
      if (value === '1') {
        return '单选'
      } else if (value === '2') {
        return '多选'
      } else if (value === '3') {
        return '简答'
      }
    },
    clearword () {
      this.pamss.keyword = ''
      this.getlist()
    },
    async searchRandoms () {
      this.params.page = 1
      const res_ = await randoms(this.pamss)
      this.list = res_.data.items
      this.counts = res_.data.counts
      // console.log(res_)
    },
    pageChange (page) {
      this.params.page = page
      this.getlist()
    },
    delRandoms (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // console.log(id)
          await removeRandoms(id)
          this.$message.success('删除成功')
          this.getlist()
        })
        .catch(() => {})
    },
    sizechange (size) {
      this.params.page = 1
      this.params.pagesize = size
      this.getlist()
    },
    async infoDialog (item) {
      // console.log(item)
      this.dialogVisible = true
      const res = await detail(item)
      this.filterlist = res.data
      // console.log(this.filterlist)
    },
    closeDialog () {
      this.dialogVisible = false
    }
  }
  // watch: {
  //   keyWord (val) {
  //     console.log('keyword是', val)
  //     this.filterlist = this.list.filter((item) => {
  //       return item.id.indexOf(val) !== -1
  //     })
  //   }
  // }
}
</script>
<style scoped lang='css'>
.btn {
  float: right;
}
.container {
  margin: 10px;
}
.pagement{
  float: right;
  margin: 10px;
}
::v-deep #elbtn{
  color:rgb(225, 96, 32);
  background-color: rgb(241, 235, 236);
}
::v-deep #elbtn:hover{
  background-color: rgb(225, 96, 32);
  color: rgb(241, 235, 236);
}
.word{
  margin-left: 30px;
}
.form{
  margin-top: 0;
}
</style>
